<template>
  <div>
    <BasicTable @register="registerTable">
      <template #action="{ record }">
        <TableAction :actions="getActions(record)" />
      </template>
    </BasicTable>
    <Detail @register="registerDesc" />
  </div>
</template>
<script lang="ts" name="monitor-operate-log" setup>
  import { ref, Ref, onMounted } from "vue"
  import { BasicTable, TableAction } from "/@/components/Table"
  import { useDrawer } from "/@/components/Drawer"
  import { useListPage } from "/@/hooks/system/useListPage"
  import * as logApi from "/@/api/infra/operateLog"
  import { columns, searchFormSchema } from "./data"
  import Detail from "./Detail.vue"
  import { useMessage } from "/@/hooks/web/useMessage"
  import { Icon } from "/@/components/Icon"

  const { createMessage } = useMessage()
  const [registerDesc, { openDrawer: openLogDesc }] = useDrawer()

  const { prefixCls, tableContext } = useListPage({
    designScope: "operate-log",
    tableProps: {
      title: "操作日志列表",
      api: logApi.pageLog,
      columns: columns,
      bordered: false,
      canResize: false,
      rowSelectionTipType: "onTableTitle",
      actionColumn: {
        width: 130,
        title: "操作",
        dataIndex: "action",
        fixed: false,
        slots: { customRender: "action" },
      },
      formConfig: {
        labelWidth: 90,
        schemas: searchFormSchema,
        fieldMapToTime: [["fieldTime", ["beginDate", "endDate"], "YYYY-MM-DD HH:mm:ss"]],
      },
    },
    // exportConfig: {
    //   name: "操作日志列表",
    //   url: logApi.getExportUrl,
    // },
    // importConfig: {
    //   url: logApi.getImportUrl,
    // },
  })

  const [registerTable, { reload, getForm }] = tableContext

  onMounted(async () => {

    const { updateSchema } = getForm()
    updateSchema({
      field: "logTypeId",
      componentProps: ({}) => {
        return {
          showSearch: true,
          immediate: true,
          api: logApi.listLogType,
          // params: {
          //   parentKey: "0",
          // },
          onSelect: async (value: any, option: any) => {
            console.log("value", value)
            reload()
          },
        }
      },
    })
  })

  /**
   * 操作列定义
   * @param record
   */
  function getActions(record) {
    return [
      {
        label: "详情",
        onClick: handleDesc.bind(null, record),
      }
    ]
  }

  /**
   * 详情
   */
  function handleDesc(record) {
    openLogDesc(true, {
      record,
      isUpdate: true,
    })
  }
</script>
